<template>
  <div class='layout-container'>
    <aside class='aside-container'>
      <!-- LOGO-->
      <div class='aside-logo'>
        <img alt='' class='aside-logo_img' src='@/assets/images/logo.png'>
      </div>
      <!-- 一级菜单 -->
      <div class='aside-menu'>
        <router-link v-for='(key,index) in Object.keys(RouterMenuEnum)' :key='index'
                     :class='RouterMenuEnum[key].path===currentMenu.path?"aside-menu-active":""'
                     :to='RouterMenuEnum[key].path'
                     class='aside-menu-item'>
          <img :src='RouterMenuEnum[key].icon' alt='' class='aside-menu-item_icon'>
          <span class='aside-menu-item_text'>{{ RouterMenuEnum[key].title }}</span>
        </router-link>
      </div>
    </aside>
    <div class='layout-content'>
      <header>
        <nav>
          <!-- 二级菜单 -->
          <router-link v-for='(item,index) in $route.meta.children' :key='index'
                       :to='item.path'
                       class='menu-item'>
            <span class='menu-item_text'>{{ item.title }}</span>
          </router-link>
        </nav>
        <div class='header-aside'>
          <div class='header-aside_item'>
            <img alt='' class='user-avatar' src='@/assets/images/avatar.webp'>
            <span class='user-name'>Admin</span>
            <span class='btn-logout' @click='logout'>退出</span>
          </div>
        </div>
      </header>
      <section>
        <!-- 路由视图 -->
        <router-view></router-view>
      </section>
    </div>
  </div>
</template>

<script>

import RouterMenuEnum from '@/enums/routerMenuEnum'
import { useRouterMenu } from '@/stores/routerMenu'
import { useAccount } from '@/stores/account'

export default {
  name: 'LayoutView',
  computed: {
    RouterMenuEnum() {
      return RouterMenuEnum
    }
  },
  methods: {
    logout() {
      const accountState = useAccount()
      accountState.logout()
      this.$router.push('/login')
    }
  },
  data() {
    return {
      currentMenu: {}
    }
  },
  // 监听routerMenuState.currentMenu


  mounted() {
    const routerMenuState = useRouterMenu()
    this.currentMenu = routerMenuState.current
  }
}
</script>

<style lang='less' scoped>
.layout-container {
  width: 100%;
  height: 100%;
  background-color: #10121e;
  display: flex;

  .aside-container {
    background-color: #10121e;
    width: 230px;
    height: 100vh;
    // 滚动条
    overflow-y: auto;
    transition: all 0.3s ease-in-out;
    // 隐藏滚动条
    &::-webkit-scrollbar {
      display: none;
    }

    // 兼容火狐
    scrollbar-width: none;
    // 兼容 chrome
    -ms-overflow-style: none;
    // 兼容更多浏览器
    overflow: -moz-scrollbars-none;


    .aside-logo {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #10121e;
      height: 100px;
      width: 230px;
      transition: width .3s ease;

      // 鼠标悬浮
      &:hover {
        background-color: #181818;
      }

      .aside-logo_img {
        width: 183px;
        height: 45px;
      }
    }

    .aside-menu {
      margin-top: 110px;


      .aside-menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 190px;
        height: 120px;
        text-decoration: none;
        transition: all 0.3s ease-in-out;
        color: #fff6;

        border-radius: 20px;
        margin: 20px auto;

        &:hover {
          color: #ffffff;
          background: #272b3b;
        }

        &.active {
          color: #ffffff;
        }

        .aside-menu-item_icon {
          width: 40px;
          height: 40px;
        }

        .aside-menu-item_text {
          margin-top: 10px;
          font-size: 18px;
          font-weight: 700;
        }
      }

      .aside-menu-active {
        background: #272b3b;
        color: #ffffff;
      }
    }
  }

  .layout-content {
    flex: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;


    header {
      background-color: #272b3b;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      nav {
        display: flex;
        align-items: center;
        height: 100px;

        .menu-item {
          display: flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          width: auto;
          height: 60px;
          margin: 10px 20px;
          padding: 0 10px;
          transition: all 0.1s ease-in-out;

          .menu-item_text {
            font-size: 18px;
            font-weight: 700;
            color: #fff;
          }

          &:hover {
            background: #272b3b;

            .menu-item_text {
              color: rgb(33, 108, 230);
            }

            border-bottom: #1a5bc8 2px solid;
          }

          &.active {
            background: #272b3b;

            .menu-item_text {
              color: rgb(33, 108, 230);
            }
          }
        }
      }

      .header-aside {
        display: flex;

        .header-aside_item {
          display: flex;
          align-items: center;
          margin-right: 20px;

          .user-avatar {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin-right: 10px;
          }

          .user-name {
            font-size: 18px;
            font-weight: 700;

            color: #fff;
            cursor: pointer;
            // 鼠标悬浮
            &:hover {
              color: rgb(33, 108, 230);
            }
          }

          .btn-logout {
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            cursor: pointer;
            margin-left: 10px;
            border-radius: 5px;
            padding: 5px 15px;

            background-color: rgb(33, 108, 230);
            border: 1px solid rgb(33, 108, 230);
            // 鼠标悬浮
            &:hover {
              color: #fff;
              background-color: rgba(33, 108, 230, 0.65);
              border: 1px solid rgba(33, 108, 230, 0.65);
            }
          }
        }
      }
    }

    section {
      flex: 1;
      overflow-y: auto;
      background-color: #141726;
      padding: 10px 20px;
    }
  }
}

</style>
